<template>
  <div class="upload-practise2">
    <nav-bar></nav-bar>
    <div class="page-main">
      <div class="xyd-container">
        <div class="xyd-c-title"><span style="float:left;">发布练习</span></div>
        <div class="xyd-c-content">
          <div class="paper-content">
            <practise-item
              :value="item"
              v-for="item,i in practise"
              :num="i + 1"
              :key="i"
              @delete="del"
            ></practise-item>
          </div>
          <div class="btn-group">
            <button class="yellow-btn" @click="add">添加新题目</button>
            <button class="common-btn" @click="publish">发布练习</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { NavBar } from 'views/layout'
  import practiseItem from 'views/components/practiseItem'
  import { submitTest } from 'api/common'
  export default {

    name: 'uploadPractise2',
    components: {
      NavBar,
      practiseItem
    },
    data() {
      return {
        practise: []
      };
    },
    methods: {
      add() {
        const sub = {
          title: '',
          type: '',
          standard_answer: []
        }
        this.practise.push(sub)
      },
      del(num) {
        this.practise.splice(num - 1, 1)
      },
      publish() {
        const { id } = this.$route.query
        submitTest({
          subject: this.practise.map(v => {
            v = {
              paper_id: id,
              title: v.title,
              type: v.type,
              standard_answer: v.standard_answer.join(',')
            }
            return v
          })
        })
        .then(res => {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          this.$router.push('/practise')
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .upload-practise2{
    .page-main{
      .xyd-container{
        .xyd-c-title{
          padding: 0 15px;
        }
        .xyd-c-content{
          padding: 40px 0;
          .paper-content{

          }
          .btn-group{
            margin-top: 10px;
            text-align: center;
            .yellow-btn{
              font-size: 16px;
              height: 38px;
              width: 290px;
            }
            .common-btn{
              font-size: 16px;
              height: 38px;
              width: 290px;
            }
          }
        }
      }
    }
  }
</style>